<template>
  <div id="" class="">
    <headerbox :headerTitle="'详情'" :hasBack='true'></headerbox>
    <div class="messageCon p10 bgWhite">
      <img class="headerimg" :src="imgUrlLink(msgCon.author.headPortrait)" alt="">
      <div class="messagediv">
        <div class="circlebtm">
          <span class="name">
            {{msgCon.author.nickName}}
            <p>{{reviewTime(msgCon.reviewTime)}}</p>
          </span>
          <span>
            <!-- <img src="@/assets/playcircleImage/reply_icon.png" alt=""> -->
            <img src="@/assets/playcircleImage/snap2.png" alt=""> {{msgCon.praiseCount}}
          </span>
        </div>
        <p class="">{{msgCon.content}}</p>
      </div>
    </div>

    <noneList v-if="msgCon.reply.length==0" :noneTxt="'暂无评论~'"></noneList>
    <ul class="p10 bgWhite" v-else>
      <li class="messageCon" v-for="elem in msgCon.reply" :key="elem.key">
        <img class="headerimg" :src="imgUrlLink(elem.author.headPortrait)" alt="">
        <div class="messagediv borderBtm">
          <div class="circlebtm">
            <span class="name">
              {{elem.author.nickName}}
              <p>{{reviewTime(elem.reviewTime)}}</p>
            </span>
            <!-- <span>
              <img src="@/assets/playcircleImage/snap2.png" alt=""> 36
            </span> -->
          </div>
          <p class="">{{elem.content}}</p>
        </div>
      </li>
    </ul>

    <replyButtom :replyTip="'回复评论...'" :articleId="msgCon.articleId" :replyId="msgCon.id"></replyButtom>
  </div>
</template>
<script>
import { dateChangeTime } from '@/utils/util.js';
export default {
  name: "",
  data: () => ({
    msgCon:'',
  }),
  components: {
    replyButtom:()=>import('./template/replyButtom'),
    noneList:()=>import('@/components/noneList/noneList'),
  },
  methods: {
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    reviewTime(time) {
      return dateChangeTime(time);
    }
  },
  mounted() {
    //do something after mounting vue instance
    let msgCon = this.$route.query.msgCon;
    this.msgCon = msgCon;
    console.log(msgCon);
  }
}
</script>
<style lang="scss" scoped>
.borderBtm{
  border-bottom: 1px solid $boxBgcolor;
}
.messageCon{
  @include flex;
  align-items: flex-start;
  margin-bottom: 10px;
  .headerimg{
    width: 50px; height: 50px;
    border-radius: 100%;
  }
  .messagediv{
    @include flexcell;
    margin-left: 10px;
    line-height: 1.5em;
    padding-bottom: 10px;
    .name{
      color: $lightColor;
      font-size: 12px;
    }
  }
}
.replyMsg{
  background: $boxBgcolor;
  padding: 6px 10px;
  margin-bottom: 10px;
  span{
    color: $blueColor;
  }
}
.circlebtm{
  @include flex;
  align-items: flex-start;
  justify-content: space-between;
  color: $grayColor;
  margin-bottom: 10px;
  img{
    width: 15px;
  }
  span:last-child{
    img{
      margin-left: 10px;
    }
  }
}
</style>
